<template>
  <div class="huoqipage">
     <div class="breakline">
        当前位置：账户查询>账户信息查询><span>活期账户</span>
     </div>
     <div class="selectline">
        <el-checkbox v-model="checked">筛选</el-checkbox>
        <div class="down">
             <div class="itemdown">
                <div class="iconfont icon-xiazai1"></div>
                下载当前页
             </div>
                <div class="itemdown">
                <div class="iconfont icon-xiazai1"></div>
                下载全部
             </div>
                <div class="itemdown">
                <div class="iconfont icon-24gl-printer"></div>
                打印
             </div>
        </div>
     </div>
    <div class="tablepage">
<div class="table-container">
<table class="account-table">
<thead >
<tr style="background: #C7E0F4;">
<th style="background: #C7E0F4;"><input type="checkbox" v-model="selectAll" @change="toggleAll"/> 全选</th>
<th style="background: #C7E0F4;">账号 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">账户名称 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">币种 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">行别 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">账户余额 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">可用余额 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">签约类型 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">钞汇鉴别 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">账户归类 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">开户机构 <span class="iconfont icon-expand-up-down-fill"></span></th>
</tr>
</thead>
<tbody style="background: #ECF3FB;">
<tr>
<td><input type="checkbox" v-model="selected"/></td>
<td class="link">32001647136052522743</td>
<td>江苏知己新能源科技有限公司</td>
<td>人民币元</td>
<td>中国建设银行</td>
<td style="color:gray;">点击查询</td>
<td>-</td>
<td>签约</td>
<td>钞</td>
<td>-</td>
<td>中国建设银行股份有限公司海安支行</td>
</tr>
</tbody>
</table>
<div class="pageline">
     <div class="selectline">
        <el-checkbox v-model="checked">全选</el-checkbox>
        <div class="down">
             <div class="itemdown">
                <div class="iconfont icon-xiazai1"></div>
                下载当前页
             </div>
                <div class="itemdown">
                <div class="iconfont icon-xiazai1"></div>
                下载全部
             </div>
                <div class="itemdown">
                <div class="iconfont icon-24gl-printer"></div>
                打印
             </div>
        </div>
     </div>
     <div class="fenye">
        <div class="home">首页</div>
        <div class="shang"> 上一页</div>
        <div class="ye">1</div>
        <div class="xia">下一页</div>
        <div class="all">共1页</div>
      <div class="tiao">到第<div class="box"></div>页</div>
      <div class="zhuan">转至</div>
     </div>
</div>

<div class="actions">
<button>账户信息</button>
<button>实时余额</button>
<button @click="chaxunmingxi">交易明细</button>
<button>历史余额</button>
</div>
</div>


<div class="tips">
<h4>温馨提示</h4>
<p>1.账户信息查询最多支持5个账户。</p>
<p>2.实时余额查询支持同时50个账户。</p>
<p>3.历史余额、明细查询支持5个账户同时查询并实时返回查询结果，5个以上将通过批量方式查询下载。</p>
<p>4.本日首次登录时，历史余额栏位为系统自动于本日零点查询的账户余额；本日非首次查询余额，历史余额显示上次查询的余额信息</p>
<p>5.若您的签约/授权账户变动未及时体现在账户栏列表中，请点击此处<span class="shuaxin">刷新</span> 。</p>
</div>
</div>
  </div>
</template>

<script>
export default {
data(){
    return{
       selectAll: false,
selected: false,

    }
},
methods: {
toggleAll() {
this.selected = this.selectAll
},
chaxunmingxi(){
    this.$router.push({
        path:'/getMenuInfo/mingxi'
    })
},
}
}
</script>

<style lang='less' scoped>
.huoqipage{
    width: 100%;
    .breakline{
        width: 100%;
        display: flex;
        align-items: center;
        background: #F5F4F9;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        font-size: 0.8rem;
        padding: 0.5rem 0.3rem;
        span{
            font-weight: bold;
        }
    }
    .selectline{
        width: 100%;
        box-sizing: border-box;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0.8rem;
        .down{
            display: flex;
            align-items: center;
            
            .itemdown{
                color: #488FBB;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                margin-right: 0.5rem;
                .iconfont{
                    font-size: 0.8rem;
                    margin-right: 0.2rem;
                }
            }
        }
     
    }
    .tablepage {

font-family: Arial, sans-serif;
color: #333;
font-size: 14px;
}
.account-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
border: 1px solid #259dff;
text-align: center;
}
/deep/.account-table thead tr{
   background:#C7E0F4;
}
.account-table th,
.account-table td {

padding: 8px 6px;
text-align: center;
.iconfont{
    color: #258BBF;
}

}
.account-table th {
background: #f7f7f7;
color: #333;
font-weight: bold;

}
.link {
color: #004b96;
cursor: pointer;
}
.actions {
padding: 2rem 0 3rem 0;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.actions button {
margin-right: 18px;
padding: 6px 14px;
border: 1px solid #1E90FF;
background: #2391D7;
color: #ffffff;
cursor: pointer;
border-radius: 4px;
}
.actions button:hover {
background: #1E90FF;
color: #fff;
}
.pageline{
    width: 100%;
   box-sizing: border-box;
   padding: 0.3rem 0.5rem;
   background: #F8FAF5;
   border: 1px solid #cccccc;
    .selectline{
           background: #F8FAF5;
    }
    .fenye{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .home{
             color: #488FBB;
             margin-right: 0.2rem;
        }
        .shang{
           
            margin-right: 0.2rem;
        }
        .ye{
            margin-right: 0.2rem;
            border: 1px solid gray;  
            padding:0.1rem 0.2rem; 
        }
        .xia{
            margin-right: 0.2rem;
        }
        .all{
            
        }
        .tiao{
            display: flex;
            align-items: center;
            margin-right: 0.2rem;
            margin-left: 0.3rem;
            .box{
                width: 2rem;
                height: 1rem;
                border: 1px solid gray;
                margin-right: 0.2rem;
            }
        }
        .zhuan{
            color: #488FBB;
        }
    }
}
.tips{
    width: 100%;
    background:#F6FAFD;
    padding: 1rem 0.5rem;
    margin-bottom: 2rem;
   
}
.tips h4 {
color: #e7160e;

}
.tips p {
margin: 3px 0;

}
.shuaxin{
    font-weight: bold;
    color: #488FBB;
}
}
</style>